<template>
  <div id="app_container" ref="appContainer">
    <router-view></router-view>
    <!-- <WaterMark :content="['Eternity', '前端开发']" /> -->
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia'
import useThemeConfigStore from '@/store/themeConfig';

const themeConfigStore = useThemeConfigStore();
const { getColor: color, getThemeFontSize: fontSize } = storeToRefs(themeConfigStore);
const appContainer = ref<HTMLElement>();
// 该示例为修改`el-date-picker`时间选择器的颜色主题所需修改的颜色
watchEffect(() => {
  // document.body.style.setProperty('--el-text-color-primary', 'rgba(142, 193, 205, 1)');
  // document.body.style.setProperty('--el-text-color-regular', 'rgba(142, 193, 205, 1)');
  // document.body.style.setProperty('--el-fill-color-blank', 'transparent');
  // document.body.style.setProperty('--el-bg-color-overlay', 'rgba(9, 53, 57, 0.95)');
  // document.body.style.setProperty('--el-color-primary', 'rgba(24, 149, 142, 1)');
  // document.body.style.setProperty('--el-border-color-extra-light', 'rgba(24, 149, 142, 0.1)');
  // document.body.style.setProperty('--el-disabled-bg-color', 'rgba(24, 149, 142, 0.1)');
  // document.body.style.setProperty('--el-disabled-border-color', 'rgba(24, 149, 142, 0.1)');
  // document.body.style.setProperty('--el-border-color', 'rgba(12, 105, 115, 1)');
  // document.body.style.setProperty('--el-border-color-light', 'rgba(50, 205, 220, 1)');
  // document.body.style.setProperty('--el-border-color-lighter', 'rgba(12, 105, 115, 1)');
  // document.body.style.setProperty('--el-fill-color-light', 'rgba(15, 83, 95, 1)');


  const bodyStyle = document.body.style;
  bodyStyle.setProperty('--sysTitle-color', color.value.sysTitleColor);
  bodyStyle.setProperty('--layout-color', color.value.themeColor);
  bodyStyle.setProperty('--el-font-size-base', fontSize.value);
})

</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
}
#app_container {
  height: 100%;
}

</style>
